<!--
 * @FilePath     : /study_code/layui/10-33.html
 * @Description  : dropdown.reload(id, options)
 * @Date         : 2025-02-20 10:31
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-09 10:59:08
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <button class="layui-btn" id="ID-dropdown-demo-reload">
      <span>下拉菜单</span>
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>

    <script src="/layui/dist/layui.js"></script>
    <script src="/dropdown/common.js"></script>
    <script>
      layui.use(function () {
        var dropdown = layui.dropdown
        // 渲染
        dropdown.render({
          elem: '#ID-dropdown-demo-reload',
          data: [
            {
              title: 'menu item 1',
              id: 100,
            },
            {
              title: '重载该面板',
              id: 101,
            },
          ],
          click: function (data) {
            if (data.id === 101) {
              // 菜单项对应设置的 id 值
              // 重载方法
              dropdown.reload('ID-dropdown-demo-reload', {
                data: [
                  {
                    // 重新赋值 data
                    title: '新选项 1',
                    id: 111,
                  },
                  {
                    title: '新选项 2',
                    id: 222,
                  },
                ],
                show: true, // 重载即显示组件面板
              })
              return false // 点击该选项，阻止面板关闭
            }
          },
        })
      })
    </script>
  </body>
</html>
